
<template>
<el-container>
  <leftside> </leftside>
<el-container>
<div style="margin-top:50px;margin-left:5%;margin-right:5%;width:100%;float:left">
  <el-card class="box-card" v-for="item in msg" style="float:left;margin:4%;width:40%" >
    <div slot="header" class="clearfix">
      <span>{{item.title}}</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="jump(item.id)">删除</el-button>
    </div>
    <div   class="text item" style="height:35px">
      <el-tag v-for="tag in item.tag" style="float:left;margin-left:10px">{{tag}}</el-tag>
    </div>
    <div class="text item">
      <el-progress :percentage="70"></el-progress>
    </div>
    <div class="text item">
      {{item.note}}
    </div>
  </el-card>

</div>
 </el-container>

</el-container>
  

</template>


<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
<script>
import {config} from '../util'
import fetchJsonp from 'fetch-jsonp';
import leftside from './layout/leftside'
export default {
  components: {
    leftside
    },
  data(){
    return{
      msg:[
        {title:'123',note:'1232132131321313123123123',tag:''},
       

      ]
    }
  },
  methods:{
    jump:function(key){
        var $this=this
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           var url=config.baseurl
          var requerturl=url+'api/deleteTodo?id='+key
          fetchJsonp(requerturl)
          .then(function(response) {
            return response.json()
          }).then(function(json) {
            console.log('parsed json', json)
            $this.$message({
            type: 'success',
            message: '删除成功!',
            duration:1500,
            onClose:function(){
                $this.$router.go(0)
            }
          });
           
          }).catch(function(ex) {
            console.log('parsing failed', ex)
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    }
  },
 mounted(){
      var url=config.baseurl
      var requerturl=url+'/api/gettoday'
      var $this=this
      fetchJsonp(requerturl)
        .then(function(response) {
          return response.json()
        }).then(function(json) {
          $this.msg=[]
          for(var i=0;i<json.length;i++)
          $this.msg.push({
            id:json[i].id,
            level:json[i].level,
            note:json[i].note,
            title:json[i].title,
            timestart:json[i].timestart,
            timeend:json[i].timeend,
            tag:json[i].tag.split(','),

          })
          console.log($this.msg)
          if($this.msg.length==0){
             $this.$notify({
              title: '提示',
              message:('i', { style: 'color: teal'}, '暂无事项可做，赶紧去添加吧')
            });
          }
        }).catch(function(ex) {
          console.log('parsing failed', ex)
        })
    },
}
</script>
